<style>
    .noticeFont {
        color: red;
    }
</style>
<div class="layui-fluid layui-anim febs-anim" id="businesses-major" lay-title="统计详情">
    <div class="layui-row febs-container">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body febs-table-full">
                        <div class="layui-row">
                            <div class="layui-col-md2">
                                <label>应读：</label>
                            </div>
                            <div class="layui-col-md1">
                                <span class="noticeFont" id="count"></span>
                            </div>
                            <div class="layui-col-md2">
                                <label>已读：</label>
                            </div>
                            <div class="layui-col-md1">
                                <span class="noticeFont" id="readCount"></span>
                            </div>
                            <div class="layui-col-md2">
                                <label>未读：</label>
                            </div>
                            <div class="layui-col-md1">
                                <span class="noticeFont" id="unread">
                            </div>
                            <div class="layui-col-md2">
                                <label>进度：</label>
                            </div>
                            <div class="layui-col-md1">
                                <span class="noticeFont" id="plan"></span>
                            </div>
                        </div>

                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">

                        <div class="layui-row">
                            <div class="layui-btn layui-btn-sm layui-btn-primary febs-button-blue-plain table-action" id="export">
                                <i class="layui-icon layui-icon-export">导出</i>
                            </div>
                        </div>
                    </blockquote>
                    <input type="hidden" id="noticeId" data-th-value="${id}">
                    <table lay-filter="majorTable" lay-data="{id: 'majorTable'}"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="xuhao">
    {{d.LAY_TABLE_INDEX+1}}
</script>
<script data-th-inline="none" type="text/javascript">
    layui.use(['dropdown', 'jquery', 'form', 'table', 'febs'], function () {
        let $ = layui.jquery,
            febs = layui.febs,
            form = layui.form,
            table = layui.table,
            dropdown = layui.dropdown,
            $view = $('#businesses-major'),
            $query = $view.find('#query'),
            $export = $view.find('#export'),
            $add = $view.find('#add'),
            $reset = $view.find('#reset'),
            $searchForm = $view.find('form'),
            sortObject = {field: '' + '', type: null},
            tableIns;

        form.render();
        statistics();
        initTable();


        //统计

        function statistics(){
            var noticeId = $("#noticeId").val();
            $.ajax({
                type: 'get',
                url: '/noticeUser/noticeUserCount',
                data:{noticeId:noticeId},
                success:function (res){
                    if(res.flag!=false){
                        $("#count").text(res.count)
                        $("#readCount").text(res.readCount);
                        if(res.count>0 && res.readCount>=0){
                            let unread = (parseInt(res.count)) -  (parseInt(res.readCount));
                            if(unread>0){
                                $("#unread").text(unread)
                            }else {
                                $("#unread").text(0)
                            }
                            if(unread ==0){
                                $("#plan").text("已完成")
                            }else {
                                $("#plan").text("未完成")
                            }
                        }
                    }
                }
            })
        }

        table.on('sort(majorTable)', function (obj) {
            sortObject = obj;
            tableIns.reload({
                initSort: obj,
                where: $.extend(getQueryParams(), {
                    field: obj.field,
                    order: obj.type
                })
            });
        });

        //导出excel文件------
        $export.on('click',function () {
            let params = $.extend(getQueryParams(), {field: sortObject.field, order: sortObject.type});
            params.pageSize = $view.find(".layui-laypage-limits option:selected").val();
            params.pageNum = $view.find(".layui-laypage-em").next().html();
            febs.download(ctx + 'noticeUser/excel', params, '通知人员列表.xlsx');
        })

        $query.on('click', function () {
            let params = $.extend(getQueryParams(), {field: sortObject.field, order: sortObject.type});
            tableIns.reload({where: params, page: {curr: 1}});
        });


        $reset.on('click', function () {
            $searchForm[0].reset();
            sortObject.type = 'null';
            tableIns.reload({where: getQueryParams(true), page: {curr: 1}, initSort: sortObject});
        });

        function initTable() {
            var noticeId = $("#noticeId").val();
            tableIns = febs.table.init({
                elem: $view.find('table'),
                id: 'majorTable',
                url: ctx + 'noticeUser/statistics/' + noticeId,
                cols: [[
                    {title: '序号',templet: '#xuhao'},
                    {field: 'stuName', title: '阅读人'},
                    {field: 'className', title: '编码', minWidth: 180},
                    {field: 'tel', title: '手机号',minWidth: 100},
                    {field: 'readTime', title: '阅读时间', minWidth: 150,sort: true},
                    {field: 'detail', title: '是否阅读', minWidth: 80},

                ]]
            });
        }

        function getQueryParams(flag) {
            let params = $searchForm.serializeJson();
            return params;
        }
    })

</script>
